<template>
  <div>
    <el-form v-model="formSearch" :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formSearch.content" placeholder="请输入菜单名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddMenu" plain>新增</el-button>
    </el-row>

    <el-table :data="menuList"
              v-loading="loading"
              style="width: 100%; margin-top: 20px"
              border
              row-key="id"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="id"
                       label="ID"
                       sortable
                       width="100">
      </el-table-column>
      <el-table-column prop="menuName"
                       label="菜单名称"
                       width="180">
      </el-table-column>
      <el-table-column prop="icon"
                       label="图标"
                       width="100"
                       align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" style="font-size: 20px"></i>
        </template>
      </el-table-column>
      <el-table-column prop="orderNum"
                       label="排序"
                       width="120">
      </el-table-column>
      <el-table-column prop="path"
                       label="路由路径">
      </el-table-column>
      <el-table-column prop="pagePath"
                       label="页面路径">
      </el-table-column>
      <el-table-column prop="perms"
                       label="权限标识">
      </el-table-column>
      <el-table-column prop="status"
                       label="状态">
        <template slot-scope="scope">

          <el-dropdown @command="updateStatus">
            <el-button style="border: none;outline: none;box-shadow:none;background: none">
              <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
              <el-tag v-if="scope.row.status === 2" type="info">停用</el-tag>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 1)">正常</el-dropdown-item>
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 2)">停用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="showEditMenu(scope.row)" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增菜单-->
    <el-dialog title="新增菜单" :visible.sync="addDialogFormVisible" width="600px">
      <el-form :model="addForm" :rules="rules">
        <el-form-item label="菜单ID" :label-width="formLabelWidth" prop="id">
          <el-input v-model="addForm.id" auto-complete="off" style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
          <el-input v-model="addForm.menuName" auto-complete="off" style="width: 330px"></el-input>
        </el-form-item>

        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select ref="selectTree" v-model="addForm.parentId" placeholder="请选择" popper-class="popperTreeSelect">
            <el-option style="height: 100%; width: 100%" :value="addForm.parentId" :label="label">
              <el-tree
                  ref="tree"
                  :data="menuTreeList"
                  :props="defaultProps"
                  :default-checked-keys="[1]"
                  @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
        </span>
              </el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio-group v-model="addForm.menuType">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" prop="icon">
          <el-input placeholder="例：el-icon-user-solid" v-model="addForm.icon" auto-complete="off" style="width: 330px"></el-input>
        </el-form-item>

        <el-form-item label="显示顺序" :label-width="formLabelWidth" prop="orderNum">
          <el-input-number placeholder="排序顺序：从低到高" v-model="addForm.orderNum" controls-position="right" :min="0"
                           style="width: 200px"/>
        </el-form-item>

        <el-form-item label="路由地址" :label-width="formLabelWidth" prop="path">
          <el-input placeholder="例：/system/user" v-model="addForm.path" auto-complete="off"
                    style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item v-if="addForm.menuType === 'C'" label="页面路径" :label-width="formLabelWidth">
          <el-input placeholder="例：system/user" v-model="addForm.pagePath" auto-complete="off"
                    style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item v-if="addForm.menuType === 'C'" label="权限标识" :label-width="formLabelWidth">
          <el-input placeholder="例：system:user" v-model="addForm.perms" auto-complete="off"
                    style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="addForm.status" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="停用" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddSure">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑菜单-->
    <el-dialog title="编辑菜单" :visible.sync="editDialogFormVisible" width="600px">
      <el-form :model="editFrom" :rules="rules">

        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
          <el-input v-model="editFrom.menuName" auto-complete="off" style="width: 330px"></el-input>
        </el-form-item>

        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select ref="selectTree" v-model="editFrom.parentId" placeholder="请选择" popper-class="popperTreeSelect">
            <el-option style="height: 100%; width: 100%" :value="editFrom.parentId" :label="label">
              <el-tree
                  ref="tree"
                  :data="menuTreeList"
                  :props="defaultProps"
                  :default-checked-keys="[1]"
                  @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
        </span>
              </el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio-group v-model="editFrom.menuType">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" prop="icon">
          <el-input placeholder="例：el-icon-user-solid" v-model="editFrom.icon" auto-complete="off" style="width: 330px"></el-input>
        </el-form-item>

        <el-form-item label="显示顺序" :label-width="formLabelWidth" prop="orderNum">
          <el-input-number placeholder="排序顺序：从低到高" v-model="editFrom.orderNum" controls-position="right" :min="0"
                           style="width: 200px"/>
        </el-form-item>

        <el-form-item label="路由地址" :label-width="formLabelWidth" prop="path">
          <el-input placeholder="例：/system/user" v-model="editFrom.path" auto-complete="off"
                    style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item v-if="editFrom.menuType === 'C'" label="页面路径" :label-width="formLabelWidth">
          <el-input placeholder="例：system/user" v-model="editFrom.pagePath" auto-complete="off"
                    style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item v-if="editFrom.menuType === 'C'" label="权限标识" :label-width="formLabelWidth">
          <el-input placeholder="例：system:user" v-model="editFrom.perms" auto-complete="off"
                    style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="editFrom.status" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="停用" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {handleTree} from "@/utils/server";
// import {getMenuTree} from "@/api/menu";

export default {
  name: "admin-menu",
  data() {
    return {
      menuList: [],
      loading: false, //加载动画
      formSearch: { //搜索表单
        content: ''
      },
      formLabelWidth: '120px',
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      addForm: {},
      menuTreeList: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      editFrom: {},
      label: '', //表单中的辅助显示
      rules: {
        id: [
          {required: true, message: '请输入菜单ID', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        menuName: [
          {required: true, message: '请输入菜单名称', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '请输入菜单图标', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        path: [
          {required: true, message: '请输入路由地址', trigger: 'blur'},
          {min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
        ],
        orderNum: [
          {required: true, message: '请输入显示顺序', trigger: 'blur'},
        ],
      },
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      this.request.get('/menu/list', {
        params: {
          content: this.formSearch.content
        }
      }).then((res) => {
        this.menuList = handleTree(res, 'id')
        this.loading = false
      }).catch(e => {
        this.$message.error(e)
      })
    },

    //下拉树形菜单
    handleNodeClick(data) {
      this.addForm.parentId = data.id;
      this.label = data.menuName
      this.$refs.selectTree.blur();
      // this.$refs.tree.getCheckedNodes()
    },

    //显示添加菜单弹框
    showAddMenu() {
      this.addDialogFormVisible = true
      this.reset()
      this.getTreeSelect(0)
    },

    //添加菜单确认
    handleAddSure() {
      this.request.post('/menu/add', this.addForm).then(() => {
        this.$message.success('添加成功')
        this.addDialogFormVisible = false
        this.getMenuList()
      }).catch(e => {
        this.$message.error(e)
      })
    },

    //显示编辑菜单弹框
    showEditMenu(row) {
      this.reset()
      this.editDialogFormVisible = true
      this.request.get('/menu/' + row.id).then((res) => {
        this.editFrom = res
        this.editFrom.status = res.status + ''
        this.getTreeSelect(res.parentId)
      })
    },

    //编辑菜单确定
    handleEditSure() {
      this.request.put('/menu/update', this.editFrom).then(() => {
        this.$message.success('修改成功')
        this.editDialogFormVisible = false
        this.getMenuList()
      }).catch(e => {
        this.$message.error(e)
      })
    },

    //改变单个分类的状态
    handleUpdateStatus(id, status) {
      return {
        id, status
      }
    },
    updateStatus(command) {
      let {id, status} = command
      this.request.put('/menu/status/' + id + '/' + status).then(() => {
        this.$message.success('更新成功')
        this.getMenuList()
      }).catch(e => {
        this.$message.error(e)
      })
    },

    //单个删除
    handleDelete(row) {
      this.$confirm("是否删除该菜单", "提示", {
        type: 'error'
      }).then(() => {
        this.request.delete('/menu/' + row.id).then(() => {
          this.$message.success("删除成功")
          this.getMenuList()
        }).catch(e => {
          this.$message.error(e)
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },

    /** 查询菜单下拉树结构 */
    getTreeSelect(pid) {
      this.request.get('/menu/list').then(res => {
        res.forEach(item => {
          if (item.id === pid) {
            this.label = item.menuName
          } else if (pid === 0) {
            this.label = '主类目'
          }
        })
        this.menuTreeList = []
        const menu = { id: 0, menuName: '主类目', children: [] }
        menu.children = handleTree(res, 'id')
        this.menuTreeList.push(menu)
      })
    },

    //表单重置
    reset() {
      this.label = ''
      this.addForm = {
        id: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: 'M',
        orderNum: undefined,
        status: '1'
      }
      this.editFrom = {
        id: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: 'M',
        orderNum: undefined,
        status: '1'
      }

    },

    //搜索
    onSubmit() {
      this.getMenuList()
    },
  }
}
</script>

<style scoped>

</style>